﻿@{
    Layout = "_QuartzNetUILayout";
}
<div>
    <el-container>
        <el-main>
            <el-row type="flex" align="middle">
                <el-col :span="18">
                    <el-form :inline="true" :model="tableQuery.filter">
                        <el-form-item label="任务名称">
                            <el-input v-model="tableQuery.filter.jobName" placeholder="任务名称" size="mini" v-on:keyup.13="OnLoadJobs"></el-input>
                        </el-form-item>
                        <el-form-item label="分组名称">
                            @* <el-input v-model="tableQuery.filter.jobGroup" placeholder="分组名称" size="mini" v-on:keyup.13="OnLoadJobs"></el-input> *@
                            <el-select v-model="tableQuery.filter.jobGroup" clearable placeholder="请选择" size="mini">
                                <el-option key="default" label="默认" value="default"></el-option>
                                <el-option key="dev" label="开发区" value="dev"></el-option>
                                <el-option key="test" label="测试区" value="test"></el-option>
                                <el-option key="verify" label="验证区" value="verify"></el-option>
                                <el-option key="official" label="正式区" value="official"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成功/失败">
                            <el-select v-model="tableQuery.filter.status" clearable placeholder="请选择" size="mini" v-on:keyup.13="OnLoadJobs">
                                <el-option key="0" label="执行失败" value="0"></el-option>
                                <el-option key="1" label="执行成功" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" v-on:click="OnLoadJobs">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="5" style="text-align: right;">
                    @if (ViewBag.Id!=null&&ViewBag.Id != 0 )
                    {
                        <el-button type="default" size="mini" icon="el-icon-top-left" v-on:click="hrefD">返回作业</el-button>
                    }
                </el-col>
            </el-row>
            <el-row type="flex" align="middle">
                <el-col :span="24" style="padding: 10px 0 0 0;">
                    <el-table ref="tb" :data="tableData" border stripe style="width: 100%;" size="mini" row-key="id">

                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <div style="padding:10px 15px;">
                                    <el-descriptions><el-descriptions-item label="异常信息"> {{ props.row.exception }}</el-descriptions-item></el-descriptions>
                                    <el-descriptions><el-descriptions-item label="请求参数"> {{ props.row.parameters }}</el-descriptions-item></el-descriptions>
                                    <el-descriptions><el-descriptions-item label="结果"> {{ props.row.result }}</el-descriptions-item></el-descriptions>
                                    <el-descriptions><el-descriptions-item label="备注"> {{ props.row.remark }}</el-descriptions-item></el-descriptions>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50" label="序号" align="center">  </el-table-column>
                        @* <el-table-column type="index" width="50" label="序号" align="center"> *@
                        <el-table-column prop="schedName" label="计划名称" width="120"></el-table-column>5
                        <el-table-column prop="jobName" label="任务名称" min-width="180" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="jobGroup" label="任务分组" width="80"></el-table-column>
                        <el-table-column prop="beginTime" label="执行开始时间" width="160"></el-table-column>
                        <el-table-column prop="endTime" label="执行结束时间" width="160"></el-table-column>
                        <el-table-column label="耗时(秒)" width="85" align="center">
                            <template slot-scope="scope">
                                {{ExpandFilt(scope.row.elapsed)}}
                            </template>
                        </el-table-column>

                        <el-table-column label="成功/失败" align="center" width="85">
                            <template slot-scope="scope">
                                <el-tag size="mini" v-if="scope.row.status==1">执行成功</el-tag>
                                <el-tag size="mini" type="danger" v-else>执行失败</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column prop="runType" label="运行方式" width="80"></el-table-column>
                        <el-table-column prop="jobAddress" label="请求地址" min-width="260" :show-overflow-tooltip="true"></el-table-column>
                        @*                         <el-table-column prop="parameters" label="请求参数" width="260"></el-table-column>
                        <el-table-column prop="result" label="结果" width="260"></el-table-column> *@
                        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>

                    </el-table>
                    <el-pagination @@size-change="handleSizeChange"
                                   @@current-change="handleCurrentChange"
                                   :current-page="tableQuery.pageNo"
                                   :page-sizes="[10, 20, 30, 40, 50]"
                                   :page-size="tableQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableQuery.totalRows">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
@section Styles{
    <style>
        .el-descriptions__header {margin-bottom: 10px !important;}
        .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {padding-bottom: 6px !important;}
    </style>
}
@section Scripts{
    <script>
        new Vue({
            el: "#main",
            data() {
                return {
                    activeIndex: '2',
                    tableData: [],
                    loading: false,
                    tableQuery: {
                        pageNo: 1,
                        pageSize: 10,
                        totalRows: 0,
                        filter: {
                            JobId: "@ViewBag.Id",
                            jobName: "",
                            jobGroup: "",
                            status: ""
                        }
                    },
                }
            },
            created() {
                setInterval(() => { this.OnLoadJobs(); }, 15000);
            },
            mounted: function () {
                this.OnLoadJobs();
            },
            methods: {
                OnLoadJobs() {
                    var that = this;
                    that.loading = true;
                    axios.post("/job/getjoblogs", that.tableQuery).then(function (res) {
                        that.tableData = res.data.data.rows;
                        that.tableQuery.totalRows = res.data.data.totalRows;
                        that.loading = false;
                    });
                },
                handleSizeChange(val) {
                    var that = this;
                    that.tableQuery.pageNo = 1;
                    that.tableQuery.pageSize = val;
                    that.OnLoadJobs();
                },
                handleCurrentChange(val) {
                    var that = this;
                    that.tableQuery.pageNo = val;
                    that.OnLoadJobs();
                },
                ExpandFilt(expand) {
                    return (parseFloat(expand) / 1000).toFixed(3)
                },
                hrefD() {
                    window.location.href = '/job/dashboard';
                }
            },
            filters: {

            }
        });
    </script>
}
